<template>
  <div class="wrap">
    <v-head>
        <nav-list v-on:navIndex ="navIndexHandle"></nav-list>
    </v-head>
    <!-- <component :is="currentView"></component> -->
    <!-- <swiper :options="swiperOption" ref="mySwiper" style="height:600px;margin-top:143Px;background-color:pink;" @slideChangeTransitionEnd="slideChangeTransitionEnd">
     <swiper-slide v-for="(slide, index) in arr" :key="index">
          <component :is="arr[navIndex]" v-show="index==navIndex"></component>
      </swiper-slide>
    </swiper> -->
     
    <div class="tab_content">
      <swiper :options="swiperOption" ref="mySwiper"  
      @slideChangeTransitionEnd="slideChangeTransitionEnd">
      <swiper-slide v-for="(slide, index) in arr" :key="index">
            <component  :is="arr[index]" ></component>
      </swiper-slide>
    </swiper>
    </div>
     <play></play>
  </div>

</template>

<script>
import NavList from '@/components/main/nav'
import Head from '@/components/main/head'
import loading  from '../common/loading'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import '../../assets/animate.min.css'
import '../../assets/swiper.animate.min.js'
import Play from '../list/play'

import { mapState, mapActions } from 'vuex'
//import Recommen from '@/components/list/recommen.vue'
// import Disk from '@/components/list/disk.vue'
// import Pal from '@/components/list/pal.vue'
const TAB_NAME = ["排行榜", "推荐"];
export default {
  data () {
    return {
      arr:["Recommen","Disk","Pal"],
       swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
       
        },
    
    }
   },
   components: {
       'nav-list':NavList,
        'v-head':Head,
         Recommen:resolve=>require(["../list/recommen.vue"],resolve),
        Disk:resolve=>require(["../list/disk.vue"],resolve),
        Pal:resolve=>require(["../list/pal.vue"],resolve),
        loading,
        swiper,
        swiperSlide,
        Play
   },
   computed:{
     currentView(){
      this.flag =true
       return this.arr[this.navIndex]
     },
     ...mapState([
       'num','navIndex'
     ]),
     swiper() {
        return this.$refs.mySwiper.swiper
      }
   },
   methods:{
     slideChangeTransitionEnd:function(){
       // console.log(this.$refs.mySwiper.swiper.activeIndex)   //切换结束时，告诉我现在是第几个slide
       //this.$store.state.navIndex =this.$refs.mySwiper.swiper.activeIndex
       this.$store.commit("NAVINDEXX",this.$refs.mySwiper.swiper.activeIndex)
     },
     //监听nav点击
     navIndexHandle:function(index){
        this.swiper.slideTo(index, 1000, false);
     },
    ...mapActions([
      'add'
    ])
   }
 }
</script>

<style lang="stylus" scoped>
 .tab_content
    width:100%

</style>



